<style lang="less">
@import "./login.less";
</style>

<template>
    <div class="login">
        <div class="login-left">
            <div class="login-left-title"></div>
            <div class="login-left-form">
                <div class="login-left-form-title">
                    <span>
                        <img src="../../assets/images/logo-min-new.png" />
                    </span>厅机关后勤服务中心医务室
                </div>
                <img src="../../assets/images/login-form-new.png" />
            </div>
        </div>
        <div class="login-con">
            <Card icon="log-in" title="欢迎登录" :bordered="false">
                <div class="form-con">
                    <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
                        <FormItem prop="userName">
                            <Input size="large" v-model="form.userName" placeholder="请输入用户名">
                                <span slot="prepend">
                                    <Icon :size="16" type="ios-person"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="password">
                            <Input size="large" type="password" v-model="form.password" placeholder="请输入密码">
                                <span slot="prepend">
                                    <Icon :size="14" type="md-lock"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Button size="large" @click="handleSubmit" :loading="loading" type="primary" long>登录</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
        </div>
        <div class="login-footer">版权所有：厅机关后勤服务中心医务室</div>
    </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
    data() {
        return {
            loading: false,
            form: {
                userName: "",
                password: "",
            },
            rules: {
                userName: [
                    { required: true, message: "账号不能为空", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "密码不能为空", trigger: "blur" },
                ],
            },
        };
    },
    methods: {
        ...mapActions(["handleLogin", "GetUserInfo"]),

        handleSubmit() {
            debugger;
            let vm = this;
            vm.loading = true;
            vm.handleLogin(vm.form)
                .then((res) => {
                    vm.loading = false;
                    if (res.StatusCode == 200) {
                        vm.GetUserInfo().then((res2) => {
                            if (res2.StatusCode == 200) {
                                vm.$router.push({
                                    name: vm.$config.homeName,
                                });
                            }
                        });
                    } else {
                        vm.$Notice.error({
                            title: res.Errors,
                        });
                    }
                })
                .catch((err) => {
                    vm.loading = false;
                });
        },
    },
};
</script>

<style></style>
